<template>
  <Nav_bar
    :title="'数据管理'"
    :isLeftArrow="false"
    :right_text="'icon user'"
    @clickRight="$router.push('/user_centre')"
  />
  <div class="machineData_box">
    <div class="box">
      <div class="body_box">
        <!-- 选择组件 -->
        <Select_down
          :select_down="false"
          :value="{ one: '设备名称' }"
          v-model:option_list_1="option_list_1"
          @leftSelectId="leftSelectId"
        />
        <div class="today_data">今日数据</div>
        <!-- 展示图 -->
        <div class="show_data">
          <div class="show_data_left" :class="{ changeBgc: TodaysData.goodsRate >= 80 }">
            <div class="show_data_text">上货率</div>
            <div class="_data">
              {{ TodaysData.goodsRate || 0 }}
              <div class="_data_param">%</div>
            </div>
            <text class="icon shang_huo"></text>
          </div>
          <div class="show_data_right">
            <div class="show_data_text">投放量</div>
            <div class="_data">
              {{ TodaysData.count || 0 }}
              <div class="_data_param">份</div>
            </div>
            <text class="icon bao_sun"></text>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="sales_progress_box">
          销售进度
          <div class="sales_progress_bg">
            <div
              class="sales_progress_data"
              :style="{
                width: `${TodaysData.marketSchedule}%`,
              }"
            ></div>
          </div>
          <div class="sales_progress_text">
            {{ TodaysData.marketSchedule || 0 }}
            <text>%</text>
            <div class="sales_progress_sold_out">
              已售{{ TodaysData.saleCount || 0 }}份/{{ TodaysData.count || 0 }}份
            </div>
          </div>
        </div>
        <!-- 单品余量列表 -->
        <div class="surplus">单品余量</div>
        <Table
          :headList="head_list"
          :bodyList="body_list"
          :compatible="'width: 80px; text-align: center;'"
          :isPding="true"
          :delivery_sum="`${delivery_sum}份`"
          :sell_sum="`${sell_sum}份`"
          :surplus_num="`${surplus_num}份`"
        />
      </div>
      <div class="yesterdays_data">昨日数据</div>
      <div class="show_data">
        <div class="show_data_left yesterdayData">
          <div class="show_data_text">昨日报损率</div>
          <div class="_data">
            {{ YesterdaysData.breakageRete || 0 }}
            <div class="_data_param">%</div>
          </div>
          <text class="icon bao_sun"></text>
        </div>
        <div class="show_data_right add_user">
          <div class="show_data_text">新增客户</div>
          <div class="_data">
            {{ YesterdaysData.addClientCount || 0 }}
            <div class="_data_param">人</div>
          </div>
          <text class="icon xin_zeng"></text>
        </div>
      </div>
    </div>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { getMachineDataApi, getMachineListAllApi } from '@/api/machineData/machineData'
import { useUserInfoStore } from '@/stores'
import { useRouter } from 'vue-router'
import { Msg } from '@/utils/tools'

const option_list_1 = ref([])
const head_list = [
  { _title: '产品名称', key: 'comboName' },
  { _title: '投放数量', key: 'putCount' },
  { _title: '已售数量', key: 'saleCount', additional: 'refundCount' },
  { _title: '剩余数量', key: 'surplusCount' },
]

const body_list = ref([])
const value1 = ref()
/**今日数据 */
const TodaysData = ref({
  goodsRate: null,
  machineName: null,
  marketSchedule: null,
  saleCount: null,
  surplusCount: null,
  count: null,
})
/**昨日数据 */
const YesterdaysData = ref({
  addClientCount: null,
  breakageRete: null,
})

/** 所有投放数量 */
const delivery_sum = computed(() => {
  let sum = 0
  body_list.value.forEach((ev) => {
    const num = parseInt(ev.putCount)
    sum += num
  })
  return sum
})
/**销售数量 */
const sell_sum = computed(() => {
  let sum = 0
  body_list.value.forEach((ev) => {
    const num = parseInt(ev.saleCount)
    sum += num
  })
  return sum
})
/**剩余数量 */
const surplus_num = computed(() => {
  let sum = 0
  body_list.value.forEach((ev) => {
    const num = parseInt(ev.surplusCount)
    sum += num
  })
  return sum
})
/**退款数量 */
const refund_num = computed(() => {
  let sum = 0
  body_list.value.forEach((ev) => {
    const num = parseInt(ev.refundCount)
    sum += num
  })
  console.log('退款数量', sum)
  return sum
})

/**获取设备数据 */
const getMachineData = async () => {
  if (!value1.value) return Msg('请选择设备')
  const res = await getMachineDataApi({ machineId: value1.value })
  // console.log(res)
  handData(res?.data)
}
/**处理返回 data */
const handData = (data) => {
  TodaysData.value.goodsRate = data.goodsRate
  TodaysData.value.count = data.count
  TodaysData.value.machineName = data.machineName
  TodaysData.value.marketSchedule = data.marketSchedule
  TodaysData.value.saleCount = data.saleCount
  TodaysData.value.surplusCount = data.surplusCount
  YesterdaysData.value.addClientCount = data.addClientCount
  YesterdaysData.value.breakageRete = data.breakageRete
  body_list.value = data.comboMarginDTOList
    ? data.comboMarginDTOList.map((item) => {
        return {
          id: item.comboId,
          comboName: item.comboName,
          putCount: item.putCount,
          saleCount: item.saleCount,
          surplusCount: item.surplusCount,
          refundCount: item.refundCount,
        }
      })
    : []
}
/**获取用户所有设备 */
const getMachineListAll = async () => {
  const res = await getMachineListAllApi()
  // console.log(res)
  const list = []
  res.data.forEach((item) => {
    const objItem = {
      value: item.machineId,
      text: item.machineName,
    }
    list.push(objItem)
  })
  option_list_1.value = list
  value1.value = option_list_1.value[0]?.value
}
/**获取下拉组件传过来的设备id */
const leftSelectId = (item) => {
  // console.log(item)
  value1.value = item.value
  getMachineData()
}

onMounted(async () => {
  await getMachineListAll()
  getMachineData()
})
</script>

<style lang="scss" scoped>
.box {
  width: 347px;
  padding-bottom: 65px;
  background-color: #fff;
}
.machineData_box {
  width: 100%;
  min-height: 100%;
  padding: 7px 14px 114px;
  background-color: var(--defaultBgc);
  .body_box {
    max-width: 347px;
    box-sizing: border-box;
    padding: 0;
    // height: 598px;
    border-radius: 6px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
    background-color: #fff;
    .today_data {
      margin: 0 0 8px 5px;
      color: var(--c0);
      font-size: var(--fs12);
    }
    .sum {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs10);
      color: var(--c9);
      padding: 0 33px 0 13px;
      position: relative;
      ._text:nth-child(1) {
        position: absolute;
        left: 13px;
        top: 0;
      }
      ._text:nth-child(2) {
        position: absolute;
        left: 116px;
        top: 0;
      }
      ._text:nth-child(3) {
        position: absolute;
        left: 210px;
        top: 0;
      }
      ._text:nth-child(4) {
        position: absolute;
        left: 303px;
        top: 0;
      }
    }
  }
}
.show_data {
  position: relative;
  height: 70px;
  margin: 0 5px;
  display: flex;
  justify-content: space-between;
  z-index: 0;
  .show_data_left {
    background-color: #ffd9d9;
    color: #dd4848;
  }
  .changeBgc {
    background-color: #fcf0e5;
    color: #d78e4b;
  }

  .show_data_right {
    background-color: #ede5fc;
    color: #7c57c2;
  }
  .yesterdayData {
    color: #3b5eb1;
    background-color: #e4ecff;
  }
  .add_user {
    background-color: #d3ede2;
    color: #2bad76;
  }
}
.show_data_left,
.show_data_right {
  position: relative;
  width: 164px;
  border-radius: 6px;
  .show_data_text {
    position: absolute;
    font-size: var(--fs12);
    top: 12px;
    left: 11px;
  }
  ._data {
    display: flex;
    align-items: self-end;
    position: absolute;
    left: 12px;
    bottom: 6px;
    font-size: 24px;
    font-weight: 600;
  }
  .icon {
    position: absolute;
    font-size: 20px;
    right: 13px;
    bottom: 4px;
  }
  ._data_param {
    font-weight: 400;
    font-size: var(--fs16);
  }
}

.sales_progress_box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 0 49px 16px;
  font-size: var(--fs14);
  border-bottom: 1px solid #f0f0f0;
  .sales_progress_bg {
    position: relative;
    width: 112px;
    height: 7px;
    border-radius: 36px;
    background: #8de3ca;
    overflow-x: hidden;
    .sales_progress_data {
      position: absolute;
      height: 7px;
      border-radius: 36px;
      background: #009065;
    }
  }
  .sales_progress_text {
    display: flex;
    font-weight: 600;
    font-size: 24px;
    margin-right: 75px;
    position: relative;
    text {
      font-weight: normal;
    }
    .sales_progress_sold_out {
      width: 80px;
      position: absolute;
      left: -20px;
      bottom: -11px;
      font-size: var(--fs10);
      color: var(--c9);
    }
  }
}

.surplus {
  margin: 14px 0 7px 17px;
}

.yesterdays_data {
  margin: 11px 0 11px 5px;
  font-size: var(--fs12);
  color: var(--c0);
}
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
</style>
